<template>
  <div id="register">
    <!-- header start -->
    <!-- end top -->
    <!-- end  -->
    <div class="reg_con_wper">
      <div class="reg_con px1000">
        <div class="reg_box clearfix">
          <div class="reg_box_l fl">
            <img src="../assets/images/reg_pic01.png" alt="">
          </div>
          <div class="reg_box_r fl">
            <h2 class="lg_sec_tit clearfix">
              <span class="fl">注册</span>
              <em class="fr">已有帐号，<a href="#">立即登录</a></em>
            </h2>
            <form>
              <fieldset>
                <p class="mt20">
                  <input type="text" placeholder="手机/用户名(4-16位数字字母)" class="lg_input01 lg_input" v-model="uname" @blur="checkuname" required>
                  <span style="font-size: 16px" :class="{red:(unamemsg=='×')}" v-show="unamemsg=='×'">{{unamemsg}}</span>
                  <span style="font-size: 16px" :class="{green:(unamemsg=='√')}" v-show="unamemsg=='√'">{{unamemsg}}</span>
                  <span style="font-size: 16px" :class="{red:(unamemsg=='用户名已注册！')}" v-show="unamemsg=='用户名已注册！'">{{unamemsg}}</span>
                </p>
                <p class="mt20">
                  <!--<input type="text" placeholder="密码(3-16位数字字母)" class="lg_input02 lg_input" v-model="pwd" @blur="checkpwd" required>-->
                  <el-form label-width="80px" style="width:300px;">
                    <el-input  placeholder="请输入密码(3-16位数字字母)" v-model="pwd" show-password  @blur="checkpwd"></el-input>
                    <el-form-item label="密码强度">
                      <password-strength v-model="pwd" style="padding-top: 10px;"></password-strength>
                    </el-form-item>
                  </el-form>
                  <!--<span style="font-size: 16px" :class="{red:(pwdmsg=='×')}" v-show="pwdmsg=='×'">{{pwdmsg}}</span>
                  <span style="font-size: 16px" :class="{green:(pwdmsg=='√')}" v-show="pwdmsg=='√'">{{pwdmsg}}</span>-->
                </p>
                <p class="mt20" style="margin-top: -20px">
                  <input type="text" placeholder="确认密码" class="lg_input02 lg_input" v-model="repwd" @blur="checkrepwd" required>
                  <span style="font-size: 16px" :class="{red:(repwdmsg=='×')}" v-show="repwdmsg=='×'">{{repwdmsg}}</span>
                  <span style="font-size: 16px" :class="{green:(repwdmsg=='√')}" v-show="repwdmsg=='√'">{{repwdmsg}}</span>
                </p>
                <p class="mt20">
                  <input type="text" placeholder="手机号" class="lg_input03 lg_input" v-model="mobile" @blur="checkmobile" required>
                  <span style="font-size: 16px" :class="{red:(mobilemsg=='×')}" v-show="mobilemsg=='×'">{{mobilemsg}}</span>
                  <span style="font-size: 16px" :class="{green:(mobilemsg=='√')}" v-show="mobilemsg=='√'">{{mobilemsg}}</span>
                  <span style="font-size: 16px" :class="{red:(mobilemsg=='手机号已注册!')}" v-show="mobilemsg=='手机号已注册!'">{{mobilemsg}}</span>
                </p>
                <p class="mt20 yanzheng">
                  <input type="text" placeholder="验证码" class="lg_input04 lg_input" style="width:80px" v-model="vercode" @blur="checkvercode" required>
                  <b style="font-size: 16px" :class="{red:(vercodemsg=='×')}" v-show="vercodemsg=='×'">{{vercodemsg}}</b>
                  <b style="font-size: 16px" :class="{green:(vercodemsg=='√')}" v-show="vercodemsg=='√'">{{vercodemsg}}</b>
                  <span  v-show="show" @click="sendvercode">发送验证码</span>
                  <span v-show="!show" class="count">{{count}} s</span>
                </p>
                <p class="mt20">
                  <input type="text" placeholder="邀请码(非必填)" class="lg_input03 lg_input" v-model="invcode" @blur="checkinvcode">
                  <span style="font-size: 16px" :class="{red:(invcodemsg=='邀请码不存在！')}" v-show="invcodemsg=='邀请码不存在！'">{{invcodemsg}}</span>
                  <span style="font-size: 16px" :class="{green:(invcodemsg=='√')}" v-show="invcodemsg=='√'">{{invcodemsg}}</span>
                </p>
                <p class="pt10"><a href="#">使用条款</a>&nbsp;&nbsp;<a href="#">隐私条款</a></p>
                <p class="mt20"><a href="javascript:;" @click.prevent="registernow" class="lg_btn">立即注册</a></p>
              </fieldset>
            </form>
          </div>
        </div>
      </div>
    </div>
    <!-- footer start -->
    <!-- footer end -->

  </div>
</template>

<script type="text/javascript" src="../assets/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../assets/js/all.js"></script>

<script>
  import bus from "../assets/eventBus"
  import "../assets/css/style.css"
  import PasswordStrength from './passwordStrength/container'
  import 'element-ui/lib/theme-chalk/index.css'
  export default {
    name: "register",
    components:{PasswordStrength},
    data(){
      return{
        uname:"", pwd:"", repwd:"", mobile:"", vercode:"", invcode:"",
        unamemsg:"",pwdmsg:"",repwdmsg:"",mobilemsg:"",vercodemsg:"",invcodemsg:"",
        receivecode:"",
        unameflag:false,pwdflag:false,repwdflag:false,mobileflag:false,vercodeflag:false,invcodemsg:false,
        show:true,count:'',timer:null,
      }
    },
    methods:{
      sendvercode:function () {
        this.axios.post("/api/user/getvercode",{userPhone:this.mobile})
          .then((data)=>{
            this.receivecode=data.data
            alert(this.receivecode)
          })
        if (!this.timer) {
          this.count = 60;
          this.show = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= 60) {
              this.count--;
            } else {
              this.show = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000)
        }
      },
      registernow:function () {
        if(this.invcode==""){
          if(this.unameflag&&this.pwdflag&&this.repwdflag&&this.mobileflag&&this.vercodeflag){
            this.axios.post("/api/user/register",{
              userAccount:this.uname,userPassword:this.pwd,userPhone:this.mobile,userCode:this.invcode
            })
              .then((data)=>{
                if(data.data==1){
                  alert("注册成功！")
                  this.$emit("func","login")
                  bus.$emit("func","login")
                }else{
                  alert("注册失败！")
                }
              })
          }else{
            alert("输入的信息有误！")
          }
        }else{
          if(this.unameflag&&this.pwdflag&&this.repwdflag&&this.mobileflag&&this.vercodeflag&&this.invcodemsg){
            this.axios.post("/api/user/register",{
              userAccount:this.uname,userPassword:this.pwd,userPhone:this.mobile,userCode:this.invcode
            })
              .then((data)=>{
                if(data.data==1){
                  alert("注册成功！")
                  this.$emit("func","login")
                  bus.$emit("func","login")
                }else{
                  alert("注册失败！")
                }
              })
          }else{
            alert("输入的信息有误！")
          }
        }
      },
      checkuname:function () {
        if(this.uname!=""){
          if(!/^1[34578][0-9]{9}$/.test(this.uname)&&!/^[0-9a-zA-Z]{4,16}$/.test(this.uname)){
            this.unamemsg="×"
            this.unameflag=false
          }else{
            this.axios.post("/api/user/checkuname",{userAccount:this.uname})
              .then((data)=>{
                if(data.data==0){
                  this.unamemsg="√"
                  this.unameflag=true
                }else{
                  this.unamemsg="用户名已注册！"
                  this.unameflag=false
                }
              })
          }
        }
      },
      checkpwd:function () {
        if(this.pwd!=""){
          if(!/^[0-9a-zA-Z]{3,16}$/.test(this.pwd)){
            this.pwdmsg="×"
            this.pwdflag=false
          }else{
            this.pwdmsg="√"
            this.pwdflag=true
          }
        }
      },
      checkrepwd:function () {
        if(this.pwd!=""){
          if(this.pwd!=this.repwd){
            this.repwdmsg="×"
            this.repwdflag=false
          }else{
            this.repwdmsg="√"
            this.repwdflag=true
          }
        }
      },
      checkmobile:function () {
        if(this.mobile!=""){
          if(!/^1[34578][0-9]{9}$/.test(this.mobile)){
            this.mobilemsg="×"
            this.mobileflag=false
          }else{
            this.axios.post("/api/user/findmobile",{userPhone:this.mobile})
              .then((data)=>{
                if(data.data==0){
                  this.mobilemsg="√"
                  this.mobileflag=true
                }else {
                  this.mobilemsg="手机号已注册!"
                  this.mobileflag=false
                }
              })
          }
        }
      },
      checkvercode:function () {
        if(this.vercode!=""){
          if(!this.vercode==this.receivecode){
            this.vercodemsg="×"
            this.vercodeflag=false
          }else{
            this.vercodemsg="√"
            this.vercodeflag=true
          }
        }
      },
      checkinvcode:function () {
        if(this.invcode!=""){
          this.axios.post("/api/user/checkinvcode",{userCode:this.invcode})
            .then((data)=>{
              if(!data.data==1){
                this.invcodemsg="邀请码不存在！"
                invcodemsg=false
              }else {
                this.invcodemsg = "√"
                invcodemsg=true
              }
            })
        }
      }
    },
  }
</script>

<style scoped>
  .red{
    color: red;
  }
  .green{
    color: green;
  }
  .el-icon-check:before {
    content: "\e6da";
  }
</style>
